<html>
    
    <head>
        <title>My First vscode</title>
        <style type="text/css">
        .brick{
            margin-top: 30vh;
            margin-left:12vw;
            width: 10vw;
            height: 10vw;
            background-color: brown;
        }
        </style>
        <script>
            function frush(){
                //alert(1);
            window.location.replace("file:///C:/Users/46167/Desktop/%E6%9E%97%E7%9B%8A%E8%88%AA/yzw_spawner/bricks.html");
            }
        //setTimeout("frush()",1000)
        </script>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body id="body">
        
        
        <div style="position: absolute;top:0">
            <div class="brick" id="brick" onclick="movement = 2;setTimeout('move('+(++rd)+')',20)"></div>
        </div>
        <div style="position: absolute;top:0" id="th">
            <input id="jd" type="number"><button onclick="jd()">点我设置角度</button>
        </div>
        <script>
            function jd(){
                re = Number.parseInt(document.getElementById("jd").value)/180*Math.PI;;
            }
            var docu =document.getElementById("brick");
            //宽高
            var width = 10;
            var height = 10;
            var movement = 2;//移动距离
            var left = 12;
            var ttop = 30;
            var re =75/180*Math.PI;//角度
            var rd = 0;//Timeout的轮数
            // function setXY(x,y){
            //     docu.style.marginLeft = x-
            // }
            function move(mrd){
                left+=(movement*Math.cos(re));
                ttop+=(movement*Math.sin(re));
                movement = Math.max(movement - 0.001,0);
                if(left <0){
                    movement = Math.max(movement - 0.4,0.2);
                    left = 0;
                    re -= 2*(re-(Math.PI/2))//算法从这里开始~
                }
                if(left >100){
                    movement = Math.max(movement - 0.4,0.2);
                    left = 100;
                    re -= 2*(re+(Math.PI/2))//算法从这里开始~
                }
                if(ttop <0){
                    movement = Math.max(movement - 0.4,0.2);
                    ttop = 0;
                    re -= 2*(re);
                }
                if(ttop >100){
                    movement = Math.max(movement - 0.4,0.2);
                    ttop = 100;
                    re -= 2*(re);
                }
                //document.getElementById("th").innerHTML +="<div style=\"position: absolute;top:0\"><div class=\"brick\" style=\"margin-top: "+ttop+"vh;margin-left: "+left+"vw;background-color:blue;\"></div></div>";
                docu.style.marginLeft = left+"vw";
                docu.style.marginTop = ttop+"vh";
                if(movement == 0 || mrd!=rd){return;}
                setTimeout('move('+mrd+')',20);
            }
            
        </script>
        
    </body>
</html>